<template>
  <div style="padding:10px 0 0 10px;font-size:14px;color:rgb(85, 84, 84);">
    <div class="title">硬件资源预警信息</div>
    <div ref="radia" style="height:80%;padding-left: 20px;box-sizing:border-box;margin-right: -100px;"></div>
  </div>
</template>
<script>
import { RadialBar } from '@antv/g2plot';
export default {
  data() {
    return {
      data: [
      { type: 'CPU Usage', value: 31,},
      { type: 'Network Usage', value: 59.88,},
      { type: 'Memory Usage', value:18.6,},
    ]
    }
  },
  methods: {
    loadPie() {
      const bar = new RadialBar(this.$refs.radia, {
        data: this.data,
        legend: {
          position: 'left',
          itemName: {
            formatter: (text, item) => {
              const value = this.data.find(d => d.type === item.value)?.value || 0;
              return `${text}: ${value}`; // 显示类型和对应的值
            },
          },
        },
        xField: 'type',
        yField: 'value',
        maxAngle: 350, //最大旋转角度,
        radius: 0.8,
        innerRadius: 0.2,

        colorField: 'type',
        color: ({ type }) => {
          if (type === 'Memory Usage') {
            return '#6349ec'; // 对应 OK 的颜色
          } else if (type === 'Network Usage') {
            return '#ff9300'; // 对应 WARN 的颜色
          } else if (type === 'CPU Usage') {
            return '#ff93a7'; // 对应 CRIT 的颜色
          }
          return '#000'; // 默认颜色
        },
        barBackground: {},
      });
      bar.render();
    }
  },
  mounted() {
    this.loadPie()
  }
}
</script>